<template>
	<div class="SearchView-content">
		<el-input :placeholder="selectText" v-model="selectContent" class="input-with-select" clearable @keyup.enter.native="goSearch" @clear="clear">
			<el-select v-model="classSelect" slot="prepend" placeholder="请选择">
				<el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
			<el-button slot="append" icon="el-icon-search" @click="goSearch"></el-button>
		</el-input>
	</div>
</template>

<script>
export default {
	name:"serchView",
	props: {
		option: Array,
		classSelects:Number,
		selectContents:String
	},
	data() {
		return {
			optionList: this.option,
			selectContent: '', // 分类搜索平输入框的值
			selectText: '',
			classSelect: 0 // 分类搜索
		};
	},
	watch: {
		classSelect(val) {
			this.selectText = '请输入' + this.optionList[val].label;
		}
	},
	mounted() {
		this.selectText = '请输入' + this.optionList[0].label;
		if(this.classSelects){
			this.classSelect = this.classSelects
		}
		if(this.selectContents){
			this.selectContent = this.selectContents
		}
	},
	beforeDestroy() {},
	methods: {
		goSearch() {
			if (this.selectContent != '') {
				this.$emit('value', this.classSelect, this.selectContent);
			}
		},
		clear() {
			this.$emit('clear');
		}
	}
};
</script>

<style>
.SearchView-content {
}
.SearchView-content .el-input__inner {
	width: 130px;
}
.SearchView-content .input-with-select .el-input-group__prepend {
	width: 80px !important;
	background-color: #fff;
}
.SearchView-content .input-with-select .el-input__inner:nth-child(2) {
	width: 165px;
	padding-right: 15px;
}
</style>
